<template>
	<div class="padding-across-10" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中">
		<headerOpreate style="padding-bottom: 3px" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
		<div class="edit-mission">
			<div class="clearfloat">
				<div class="tree_list">
					<p class="panel_title">{{$t('message.deviceList')}}</p>
					<el-tree :show-overflow-tooltip="true" :data="datas" ref="tree" :highlight-current="true" show-checkbox :props="props" :default-expand-all="true" :default-checked-keys="defaultCheckedKeys" node-key="keyid"></el-tree>
				</div>
				<div class="container">
					<p class="panel_title">{{$t('message.broadcastTaskInfo')}}</p>
					<section class="form-section">
						<el-form ref="form" :model="editForm" :rules="rules" label-width="140px">
							<el-form-item :label="$t('message.title')" prop="Name">
								<el-input v-model="editForm.Name" style="width:80%;"></el-input>
							</el-form-item>
							<el-form-item label="运行模式">
								<el-select v-model="editForm.myLoopMode" :placeholder="$t('message.selectModeAlert')" style="width:80%;">
									<el-option label="只运行一次" :value="1"></el-option>
									<el-option label="自定义运行时间" :value="2"></el-option>
									<el-option label="按法定工作日运行" :value="3"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item :label="$t('message.cycleOfRunning')" prop="Days" v-show="editForm.myLoopMode === 2">
								<el-select v-model="editForm.Days" multiple placeholder="请选择" style="width:80%;">
									<el-option v-for="item in weekDays" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="运行日期" v-show="editForm.myLoopMode === 1" prop="dateTags">
								<el-tag type="primary" style="margin-left: 5px" :key="date" v-for="date in editForm.dateTags" :closable="true" :close-transition="false" @close="handleDateClose(date)">{{date}}
								</el-tag>
								<el-button v-if="editForm.dateTags.length === 0" class="button-new-tag" size="small" @click="showDateInput"><i class="el-icon-plus"></i></el-button>
							</el-form-item>
							<el-form-item label="开始时间" prop="timeTags">
								<el-tag type="primary" style="margin-left: 5px" :key="time" v-for="time in editForm.timeTags" :closable="true" :close-transition="false" @close="handleClose(time)">{{time}}
								</el-tag>
								<el-button v-if="editForm.timeTags.length === 0" class="button-new-tag" size="small" @click="showInput"><i class="el-icon-plus"></i></el-button>
							</el-form-item>
							<el-form-item label="结束时间" prop="endTimeTags">
								<el-tag type="primary" style="margin-left: 5px" :key="endTime" v-for="endTime in editForm.endTimeTags" :closable="true" :close-transition="false" @close="handleEndClose(endTime)">{{endTime}}
								</el-tag>
								<el-button v-if="editForm.endTimeTags.length === 0" class="button-new-tag" size="small" @click="showEndInput"><i class="el-icon-plus"></i></el-button>
							</el-form-item>
							<el-form-item :label="$t('message.resourceType')" prop="ResourceClass">
								<el-select v-model="editForm.ResourceClass" :placeholder="$t('message.chooseTheResourceType')" style="width:80%;">
									<el-option :label="$t('message.mediaLibrary')" :value="2"></el-option>
									<el-option :label="$t('message.urlLinkGallery')" :value="1"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item :label="$t('message.operation')" prop="Operation">
								<el-select v-model="editForm.Operation" :placeholder="$t('message.chooseYourPreferableOption')" style="width:80%;" @change="mediaChange">
									<el-option :label="$t('message.playAudio')" :value="2"></el-option>
									<el-option :label="$t('message.playVideo')" :value="3"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="执行模式" prop="PlayMode">
								<el-radio-group v-model="editForm.PlayMode">
									<el-radio :label="0">循环</el-radio>
									<el-radio :label="1">随机</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="播放音量" prop="Volume">
								<el-slider :max="100" :min="0" style="width: 300px" v-model="editForm.Volume"></el-slider>
							</el-form-item>
							<el-form-item :label="$t('message.urlLinkGallery')" prop="UrlId" v-show="editForm.ResourceClass===1">
								<el-select v-model="editForm.UrlId" multiple :placeholder="$t('message.chooseTheURLLinkGallery')" style="width:80%;">
									<el-option v-for="item in Urls" :label="item.Name +'('+ item.Path +')'" :value="item.UrlId"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="是否实时" prop="isLive" v-show="editForm.ResourceClass===2">
								<el-checkbox v-model="editForm.isLive"></el-checkbox>
							</el-form-item>
							<el-form-item :label="$t('message.mediaLibrary')" prop="MediaIds" v-show="editForm.ResourceClass===2">
								<div class="block" style="padding:0 0 1rem; ">
									<el-button type="primary" size="small" v-on:click="selectMedias">{{$t('message.selectFromMediaLibrary')}}</el-button>
									<el-button type="danger" size="small" v-on:click="deleteMedias">{{$t('message.delete')}}</el-button>
								</div>
								<el-table ref="table" border style="width: 80%" @selection-change="handleSelectionChange" :data="selectMediaList">
									<el-table-column :show-overflow-tooltip="true" type="selection" width="55">
									</el-table-column>
									<el-table-column :show-overflow-tooltip="true" :label="$t('message.name')" align="center" prop="name"></el-table-column>
									<el-table-column :show-overflow-tooltip="true" :label="$t('message.mediaType')" align="center">
										<template slot-scope="scope">
											<div>{{scope.row.type === 2?"MP3":"MP4"}}</div>
										</template>
									</el-table-column>
									<el-table-column :show-overflow-tooltip="true" :label="$t('message.isExist')" align="center">
										<template slot-scope="scope">
											<el-tag v-if="scope.row.existed" type="success"><i class="el-icon-circle-check el-icon--left"></i>{{$t('message.exist')}}</el-tag>
											<el-tag v-else type="danger"><i class="el-icon-circle-cross el-icon--left"></i>{{$t('message.noExist')}}</el-tag>
										</template>
									</el-table-column>
								</el-table>
							</el-form-item>
						</el-form>
					</section>
				</div>

				<!-- 添加运行时间 -->
				<el-dialog title="添加开始时间" v-model="addTimeDialog" :class="[dialog-tiny-width]">
					<el-form id="form" ref="editForm" label-width="100px">
						<el-form-item label="选择开始时间">
							<el-time-picker format="HH:mm" arrow-control v-model="timeInputValue" placeholder="请选择开始时间" style="width: 90%">
							</el-time-picker>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="addTimeDialog = false">取 消</el-button>
						<el-button type="primary" @click="confirmAddTime()">确 定</el-button>
					</div>
				</el-dialog>
				<!-- 添加结束时间 -->
				<el-dialog title="添加结束时间" v-model="addEndTimeDialog" :class="[dialog-tiny-width]">
					<el-form id="form" ref="editForm" label-width="100px">
						<el-form-item label="选择结束时间">
							<el-time-picker format="HH:mm" arrow-control v-model="endTimeInputValue" placeholder="请选择结束时间" style="width: 90%">
							</el-time-picker>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="addEndTimeDialog = false">取 消</el-button>
						<el-button type="primary" @click="confirmAddEndTime()">确 定</el-button>
					</div>
				</el-dialog>
				<!-- 添加运行日期 -->
				<el-dialog title="添加运行日期" v-model="addDateDialog" :class="[dialog-tiny-width]">
					<el-form id="form" ref="editForm" label-width="100px">
						<el-form-item label="选择运行日期">
							<el-date-picker type="date" v-model="dateInputValue" style="width:90%;" placeholder="请选择运行日期">
							</el-date-picker>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="addDateDialog = false">取 消</el-button>
						<el-button type="primary" @click="confirmAddDate()">确 定</el-button>
					</div>
				</el-dialog>
				<el-dialog :title="$t('message.mediaLibrary')" v-model="mediasLibraryDialog" :class="[dialog-large-width]">
					<div class="block" style="padding:0 0 1rem; ">
						<el-button size="small" type="primary" @click="submitSelectMedias">{{$t('message.addTheSelectedMedia')}}</el-button>
					</div>
					<el-table border style="width: 100%" @selection-change="handleSelectionChange1" :data="tableData">
						<el-table-column :show-overflow-tooltip="true" type="selection" width="55"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" :label="$t('message.typeName')" align="center" prop="name">
						</el-table-column>
						<el-table-column :show-overflow-tooltip="true" :label="$t('message.isExist')" align="center">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.existed" type="success"><i class="el-icon-circle-check el-icon--left"></i>{{$t('message.exist')}}</el-tag>
								<el-tag v-else type="danger"><i class="el-icon-circle-cross el-icon--left"></i>{{$t('message.noExist')}}</el-tag>
							</template>
						</el-table-column>
						<el-table-column :show-overflow-tooltip="true" :label="$t('message.resourceType')" align="center" prop="Suffix">
							<template slot-scope="scope">
								<div>{{scope.row.type === 2?"MP3":"MP4"}}</div>
							</template>
						</el-table-column>
						<el-table-column :show-overflow-tooltip="true" :label="$t('message.uploadDate')" align="center" prop="time"></el-table-column>
					</el-table>
					<div class="block" style="text-align:right;padding: 0.2rem 0px 1.5rem;">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="totalSize">
						</el-pagination>
					</div>
				</el-dialog>
			</div>
		</div>
	</div>
</template>
<script>
	import $ from 'jquery'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import headerOpreate from '../../../../components/headerOpreate'
	export default {
		components: {
			headerOpreate
		},
		data() {
			var checkName = function(rule, value, callback) {
				if(!value) {
					return callback(new Error(this.$t('message.titleRule')));
				} else {
					callback();
				}
			}.bind(this)
			var checkDate = function(rule, value, callback) {
				if(this.editForm.myLoopMode === 1 && value.length === 0) {
					return callback(new Error(this.$t('请选择运行日期')));
				} else {
					callback();
				}
			}.bind(this)
			var checkTime = function(rule, value, callback) {
				if(value.length === 0) {
					return callback(new Error('请选择开始时间'));
				} else {
					callback();
				}
			}.bind(this)
			var checkDays = function(rule, value, callback) {
				if(this.editForm.myLoopMode === 2 && value.length === 0) {
					return callback(new Error('请选择自定义运行时间'));
				} else {
					callback();
				}
			}.bind(this)
			var checkMedia = function(rule, value, callback) {
				if(this.editForm.ResourceClass === 2 && value.length === 0) {
					return callback(new Error(this.$t('message.mediaResourceRule')));
				} else {
					callback();
				}
			}.bind(this)
			var checkUrl = function(rule, value, callback) {
				if(this.editForm.ResourceClass === 1 && value.length === 0) {
					return callback(new Error('请选择URL链接，可多选。'));
				} else {
					callback();
				}
			}.bind(this)
			Date.prototype.Format = function(fmt) { //author: meizz 
				var o = {
					"Y+": this.getYear(), //年份
					"M+": this.getMonth() + 1, //月份 
					"d+": this.getDate(), //日 
					"h+": this.getHours(), //小时 
					"m+": this.getMinutes(), //分 
					"s+": this.getSeconds(), //秒 
					"q+": Math.floor((this.getMonth() + 3) / 3), //季度 
					"S": this.getMilliseconds() //毫秒 
				};
				if(/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
				for(var k in o)
					if(new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			}
			return {
				loading: false,
				addTimeDialog: false,
				timeInputValue: new Date(),
				addEndTimeDialog: false,
				endTimeInputValue: new Date(),
				
				addDateDialog: false,
				dateInputValue: new Date,
				mediasLibraryDialog: false,
				datas: [],
				tableData: [],
				weekDays: [{
					label: this.$t('message.sunday'),
					value: 0
				}, {
					label: this.$t('message.monday'),
					value: 1
				}, {
					label: this.$t('message.tuesday'),
					value: 2
				}, {
					label: this.$t('message.wednesday'),
					value: 3
				}, {
					label: this.$t('message.thursday'),
					value: 4
				}, {
					label: this.$t('message.friday'),
					value: 5
				}, {
					label: this.$t('message.saturday'),
					value: 6
				}],
				rules: {
					Name: [{
						validator: checkName,
						trigger: 'change'
					}],
					dateTags: [{
						validator: checkDate,
						trigger: 'blur'
					}],
					timeTags: [{
						validator: checkTime,
						trigger: 'blur'
					}],
					Days: [{
						validator: checkDays,
						trigger: 'blur'
					}],
					MediaIds: [{
						validator: checkMedia,
						trigger: 'blur'
					}],
					UrlId: [{
						validator: checkUrl,
						trigger: 'blur'
					}]
				},
				props: {
					label: 'name',
					id: 'keyid'
				},
				Urls: [],
				editForm: {
					isLive: true,
					myLoopMode: 1,
					Name: "",
					Operation: 2,
					ResourceClass: 2,
					UrlId: [],
					MediaIds: [],
					timeTags: [],
					dateTags: [],
					Days: [],
					selectedOprea: 1,
					endTimeTags:[],
					PlayMode:0,
					Volume: 0
				},
				selectMediaList: [],
				audioList: [],
				videoList: [],
				defaultCheckedKeys: [],
				multipleSelection: [],
				multipleSelection1: [],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				opreateDatas: [{
					show: true,
					size: 'small',
					type: "primary",
					icon: "el-icon-eleg-icon_drive el-icon--left",
					name: '保存',
					action: "saveSubmit"
				}],
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			backPrev() {
				this.$emit('changeView', "List", this.templateObj);
			},
			handleClose(tag) {
				this.editForm.timeTags.splice(this.editForm.timeTags.indexOf(tag), 1);
			},
			handleEndClose(tag){
				this.editForm.endTimeTags.splice(this.editForm.endTimeTags.indexOf(tag), 1);
			},
			showInput() {
				this.addTimeDialog = true;
				this.timeInputValue = new Date();
			},
			confirmAddTime() {
				if(this.timeInputValue) {
					this.addTimeDialog = false;
					this.editForm.timeTags.push((this.timeInputValue).Format('hh:mm') + ':00');
				}
			},
			//比较两个时间大小
			compairTime(t1, t2) {
				var a = 1;
				if(t1 > t2) {
					a = 0;
				} else {
					a = 1;
				}
				return a;
			},
			showEndInput() {
				this.addEndTimeDialog = true;
				this.endTimeInputValue = new Date();
			},
			confirmAddEndTime() {
				if(this.endTimeInputValue) {
					if(this.compairTime(this.editForm.timeTags[0], new Date(this.endTimeInputValue).Format('hh:mm') + ':00') === 1) {
						this.addEndTimeDialog = false;
						this.editForm.endTimeTags.push(new Date(this.endTimeInputValue).Format('hh:mm') + ':00');
					} else {
						this.$notify({
							title: this.$t('message.warning'),
							message: '结束时间不得早于开始时间',
							type: 'warning',
							duration: 2500
						});
					}
				}
			},
			handleDateClose(tag) {
				this.editForm.dateTags.splice(this.editForm.dateTags.indexOf(tag), 1);
			},
			showDateInput() {
				this.addDateDialog = true;
				this.dateInputValue = new Date();
			},
			confirmAddDate() {
				if(this.dateInputValue) {
					this.addDateDialog = false;
					this.editForm.dateTags.push((this.dateInputValue).Format('yyyy-MM-dd'));
				}
			},
			checked() {
				for(var i = 0; i < this.selectMediaList.length; i++) {
					this.$refs.table.toggleRowSelection(this.selectMediaList[i]);
				}
			},
			submitSelectMedias() {
				if(this.multipleSelection1.length > 0) {
					this.selectMediaList = this.selectMediaList.concat(this.multipleSelection1);
					if(this.editForm.Operation === 2) {
						this.audioList = this.selectMediaList.concat([]);
					} else {
						this.videoList = this.selectMediaList.concat([]);
					}
					this.mediasLibraryDialog = false;
					this.$nextTick(function() {
						this.checked(); //每次更新了数据，触发这个函数即可。
					})
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: this.$t('message.selectTheItemsYouWantToAdd'),
						type: 'warning',
						duration: 2500
					});
				}
			},
			mediaChange() {
				//音频和视频切换操作
				if(this.editForm.Operation === 2) {
					//MP3数据
					this.selectMediaList = this.audioList;
				} else if(this.editForm.Operation === 3) {
					//MP4数据
					this.selectMediaList = this.videoList;
				}
			},
			saveSubmit() {
				var selectNodes = this.$refs.tree.getCheckedNodes();
				this.editForm.MediaIds = this.formateSelection();
				this.$refs['form'].validate((valid) => {
					if(valid) {
						if(selectNodes.length > 0) {
							this.loading = true;
							var param = {
								Id: this.templateObj.scheduleId,
								name: this.editForm.Name,
								weekday: this.editForm.myLoopMode === 2 ? this.editForm.Days : [],
								time: this.editForm.timeTags,
								date: this.editForm.myLoopMode === 1 ? this.editForm.dateTags : [],
								deviceids: this.getControlsId(selectNodes),
								Operation: this.editForm.Operation,
								ResourceClass: this.editForm.ResourceClass,
								UrlId: this.editForm.UrlId,
								MediaIds: this.editForm.MediaIds,
								UserId: parseInt(GloabFun.getKeyId()),
								repeatmode: this.editForm.myLoopMode,
								PlayMode: this.editForm.PlayMode,
								EndTime: this.editForm.endTimeTags[0],
								Volume: this.editForm.Volume
							}
							if(this.editForm.ResourceClass === 2) {
								param.islive = this.editForm.isLive;
							}
							//修改保存
							HttpServer.httpPost.call(this, '/Api/Broadcasts/Update', param, function(response) {}, function(response) {
								this.loading = false;
								if(response.data.code === 0) {
									this.$notify({
										title: '成功',
										message: this.$t('message.saveSuccess'),
										type: 'success',
										duration: 2500
									});
									this.backPrev();
								} else {
									this.$notify.error({
										title: '错误',
										message: response.data.msg,
										duration: 2500
									});
								}
							});
						} else {
							this.$notify({
								title: this.$t('message.warning'),
								message: this.$t('message.chooseTheDevice'),
								type: 'warning',
								duration: 2500
							});
						}
					} else {
						return false;
					}
				});
			},
			getControlsId(nodes) {
				var array = [];
				nodes.forEach(function(item) {
					array.push(item.keyid);
				});
				return array;
			},
			//去掉时间中的T
			formateData(str) {
				var index1 = str.indexOf("T");
				str = str.substring(0, index1) + " " + str.substring(index1 + 1, index1 + 9);
			},
			getParams() {
				var res = {
					TaskMode: this.editForm.LoopMode,
					Name: this.editForm.Name,
					MediaIds: this.editForm.MediaIds,
					UrlId: this.editForm.UrlId,
					ResourceClass: this.editForm.ResourceClass,
					Operation: this.editForm.Operation,
					UserId: parseInt(GloabFun.getKeyId())
				};
				switch(this.editForm.LoopMode) {
					case 0:
					break;
					case 1:
					res.Date = this.dateToString(this.editForm.Date);
					break;
					case 2:
					res.Time = this.timeToString(this.editForm.Time);
					res.Days = this.editForm.Days;
					break;
				}
				return res;
			},
			tringToDate(str) {
				if(str) {
					var res = "";
					str = $.trim(str);
					if(str.length > 0) {
						var ymd = str.substring(0, str.indexOf(" ")),
						sfm = str.substring(str.indexOf(" ") + 1);
						var stArray1 = ymd.split("-"),
						stArray2 = sfm.split(":");
						return new Date(stArray1[0], stArray1[1] - 1, stArray1[2], stArray2[0], stArray2[1], stArray2[2]);
					} else {
						return new Date();
					}
				} else {
					return new Date();
				}
			},
			dateToString(date) {
				return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
			},
			stringToTime(str) {
				if(str) {
					var res = "";
					str = $.trim(str);
					if(str.length > 0) {
						var now = new Date(),
						y = now.getFullYear(),
						m = now.getMonth(),
						d = now.getDay();
						var stArray = str.split(":");
						return new Date(y, m, d, stArray[0], stArray[1], stArray[2]);
					} else {
						return new Date();
					}
				} else {
					return new Date();
				}
			},
			timeToString(date) {
				var h, m, s;
				if(date.getHours() < 10) {
					h = '0' + date.getHours();
				} else {
					h = date.getHours();
				}
				if(date.getMinutes() < 10) {
					m = '0' + date.getMinutes();
				} else {
					m = date.getMinutes();
				}
				if(date.getSeconds() < 10) {
					s = '0' + date.getSeconds();
				} else {
					s = date.getSeconds();
				}
				return h + ":" + m + ":" + s;
			},
			handleSizeChange(val) {
				this.pageSize = val;
				var filter = "mp3";
				if(this.editForm.Operation === 2) {
					filter = "mp3";
				} else {
					filter = "mp4";
				}
				this.getMediasData(filter);
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				var filter = 2;
				if(this.editForm.Operation === 2) {
					filter = 2;
				} else {
					filter = 3;
				}
				this.getMediasData(filter);
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleSelectionChange1(val) {
				this.multipleSelection1 = val;
			},
			//选择添加到广播中的文件
			formateSelection() {
				var result = [],
				array = this.multipleSelection;
				array.forEach(function(item) {
					result.push(item.keyid)
				})
				return result;
			},
			itemInArray(array, ele) {
				var temp = false;
				for(var i = 0; i < array.length; i++) {
					if(array[i].Id === ele.Id) {
						temp = true;
						break;
					}
				}
				return temp;
			},
			selectMedias() {
				//从媒体库选择
				var filter = 2;
				if(this.editForm.Operation === 2) {
					filter = 2;
				} else {
					filter = 3;
				}
				//获取媒体资源
				this.getMediasData(filter);
			},
			//去掉时间中的T
			formateMediaData(array) {
				for(var i = 0; i < array.length; i++) {
					var index1 = array[i].time.indexOf("T");
					array[i].time = array[i].time.substring(0, index1) + " " + array[i].time.substring(index1 + 1, index1 + 9);
				}
			},
			getMediasData(filter) {
				var param = {
					"Type": filter,
					"index": this.currentPage,
					"pagesize": this.pageSize,
					"UserId": parseInt(GloabFun.getKeyId())
				}
				HttpServer.httpPost.call(this, '/Api/User/File/MediaFileInfoByType', param, function(response) {}, function(response) {
					// console.log('媒体文件', response)
					if(response.data.code === 0) {
						this.formateMediaData(response.data.Info_);
						this.tableData = response.data.Info_;
						this.totalSize = response.data.totalcount;
						this.mediasLibraryDialog = true;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
			deleteMedias() {
				//删除媒体
				if(this.multipleSelection.length > 0) {
					this.$confirm(this.$t('message.deleteItemWarning'), this.$t('message.warning'), {
						confirmButtonText: this.$t('message.yes'),
						cancelButtonText: this.$t('message.no'),
						type: 'warning'
					}).then(() => {
						if(this.editForm.Operation === 2) {
							//MP3数据
							this.audioList = this.spliceMedias(this.audioList, this.multipleSelection);
							this.selectMediaList = this.audioList;
						} else if(this.editForm.Operation === 3) {
							//MP4数据
							this.videoList = this.spliceMedias(this.videoList, this.multipleSelection);
							this.selectMediaList = this.videoList;
						}
					}).catch(() => {
						//取消批量删除处理
						this.$notify.info({
							title: '消息',
							message: this.$t('message.cancleOperation'),
							duration: 2500
						})
					});
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: this.$t('message.pleaseSelectItemsToDelete'),
						type: 'warning',
						duration: 2500
					});
				}
			},
			spliceMedias(array1, array2) {
				var tempArray = [];
				array1.forEach(function(item) {
					var dele = false;
					for(var i = 0; i < array2.length; i++) {
						if(array2[i].Id === item.Id) {
							dele = true;
							break;
						}
					}
					if(!dele) {
						tempArray.push(item);
					}
				});
				return tempArray;
			},
			setDefaultCheckes(nodeKeys) {
				this.$refs.tree.setCheckedKeys(nodeKeys);
			},
			getDefaultSelectMedias(idArray, dataArray) {
				var tempArray = [];
				idArray.forEach(function(item) {
					for(var i = 0; i < dataArray.length; i++) {
						if(dataArray[i].keyid === item) {
							tempArray.push(dataArray[i]);
							break;
						}
					}
				});
				return tempArray;
			},
			//初始化数据
			getDatas() {
				//获取设备信息
				HttpServer.httpPost.call(this, '/Api/Device/Info', {category: ['MultimediaIT']}, function(res) {}, function(res) {
					if(res.data.code === 0) {
						this.datas = res.data.deviceinfo;
						//获取广播详情
						HttpServer.httpGet.call(this, '/Api/Broadcasts/' + this.templateObj.scheduleId, function(response) {}, function(response) {
							// console.log('广播详情', response)
							if(response.data.code === 0) {
								if(response.data.data.MediaIds != null) {
									HttpServer.httpPost.call(this, '/Api/User/File/MediaFileInfoByType', {
										"Type": response.data.data.Operation,
										"UserId": parseInt(GloabFun.getKeyId())
									}, function(resp) {}, function(resp) {
										this.selectMediaList = this.getDefaultSelectMedias(response.data.data.MediaIds, resp.data.Info_);
										if(response.data.data.Operation === 2) {
											this.audioList = this.selectMediaList;
										} else {
											this.videoList = this.selectMediaList;
										}
										this.$nextTick(function() {
											this.checked(); //每次更新了数据，触发这个函数即可。
										})
									});
								}
								HttpServer.httpPost.call(this, '/Api/User/Urls',
								{
									page: this.currentPage,
									size: this.pageSize,
									filter: "",
									UserId: parseInt(GloabFun.getKeyId())
								}, function(resp) {}, function(resp) {
									this.Urls = resp.data.data;
									//									if(response.data.data.UrlId === 0) {
									//										response.data.data.UrlId = resp.data.data[0].UrlId;
									//									}	
								});
								this.editForm.Volume = response.data.data.Volume;
								this.editForm.Operation = response.data.data.Operation;
								this.editForm.Name = response.data.data.Name;
								this.editForm.timeTags = response.data.data.Time;
								this.editForm.myLoopMode = response.data.data.repeatmode;
								this.editForm.PlayMode = response.data.data.PlayMode;
								// this.defaultCheckedKeys = response.data.data.DeviceIds;
								this.setDefaultCheckes(response.data.data.DeviceIds);
								this.editForm.ResourceClass = response.data.data.ResourceClass;
								if(response.data.data.ResourceClass === 2) {
									this.editForm.isLive = response.data.data.islive;
									this.editForm.MediaIds = response.data.data.MediaIds;
								}
								if(response.data.data.ResourceClass === 1) {
									this.editForm.UrlId = response.data.data.UrlId;
								}
								if(response.data.data.EndTime != null){
									this.editForm.endTimeTags = [];
									this.editForm.endTimeTags.push(response.data.data.EndTime);
								}
								if(response.data.data.Date != null) {
									this.editForm.dateTags = response.data.data.Date;
								}
								if(response.data.data.Days != null) {
									this.editForm.Days = response.data.data.Days;
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						})
					} else {
						this.$notify.error({
							title: '错误',
							message: res.data.msg,
							duration: 2500
						});
					}
				});
			},
		},
		created() {
			this.getDatas();
		}
	}
</script>
<style lang="less">
	.tree_list {
		.el-tree {
			overflow: auto;
		}
		.el-tree-node__expand-icon {
			display: none;
		}
		.el-checkbox {
			margin-left: 10px;
		}
	}
	
	.edit-mission {
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 530px;
			max-height: 570px;
		}
	}
	
	.upload-section {
		>div {
			min-width: 480px;
		}
	}
</style>
<style scoped lang="less">
	.tree_list {
		width: 220px;
		float: left;
		height: 100%;
		.panel_title {
			border-radius: 3px;
			background-color: #000;
			color: white;
		}
		>div {
			width: 100%;
			height: 100%;
		}
	}
	
	.container {
		width: e("calc(100% - 220px)");
		float: left;
		height: 100%;
		.panel_title {
			border-radius: 3px;
			background-color: #000;
			color: white;
		}
		.form-section {
			border: 1px solid #d3dce6;
			height: 100%;
			margin-left: 10px;
			overflow-y: auto;
			form {
				margin: 20px 0 10px 0;
			}
		}
	}
	
	.el-tree-node__expand-icon.is-leaf {
		width: 10px;
		margin: 0;
	}
</style>